
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
    <base href="http://192.168.10.246:9000/">
    <title>登录</title>
    <link href="images/favicon.ico" rel="Shortcut Icon" type="image/x-icon">
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
            -o-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        ul,
        li {
            list-style: none;
        }

        html,
        body {
            height: 100%;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
        }

        .fn-clearfix:before,
        .fn-clearfix:after {
            content: "";
            display: table;
        }

        .fn-clearfix:after {
            clear: both;
        }

        .fn-clearfix {
            zoom: 1;
        }

        .global-login {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .login-logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 220px;
            height: 66px;
            background-image: url('');
            background-repeat: no-repeat;
            background-size: 220px;
            z-index: 2;
        }

        .global-login .global-bg {
            position: absolute;
            height: 100%;
            width: 100%;
            background-image: url("images/bg5.jpg");
            background-position: 50% 50%;
            background-size: cover;
            background-repeat: no-repeat;
            z-index: 1;
            animation: myfirst 2s linear 1s infinite alternate;
            /* Firefox: */
            -moz-animation: myfirst 2s linear 1s infinite alternate;
            /* Safari 和 Chrome: */
            -webkit-animation: myfirst 2s linear 1s infinite alternate;
        }

        @keyframes myfirst {
            from {
                background-position: center 0;
            }

            to {
                background-position: center -20px;
            }
        }

        @-moz-keyframes myfirst

        /* Firefox */
            {
            from {
                background-position: center 0;
            }

            to {
                background-position: center -20px;
            }
        }

        @-webkit-keyframes myfirst

        /* Safari 和 Chrome */
            {
            from {
                background-position: center 0;
            }

            to {
                background-position: center -20px;
            }
        }

        .global-login .global-bg:after {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
            content: "";
            display: block;
            background: #0072ff;
            background-image: -webkit-linear-gradient(120deg, #0072ff, #0332e0);
            background-image: linear-gradient(120deg, #0072ff, #0332e0);
            background-repeat: repeat-x;
            opacity: .92;
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
        }

        .global-login-cont {
            width: 380px;
            padding: 30px;
            background-color: rgba(255, 255, 255, 0.98);
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            position: relative;
            z-index: 100;
            margin-bottom: 60px;
        }

        .global-login-cont .tit {
            text-align: center;
            color: #0072ff;
            margin-bottom: 20px;
            font-size: 24px;
        }

        .global-login-list li {
            margin-bottom: 20px;
        }

        .global-login-list li:last-child {
            margin-bottom: 8px;
        }

        .global-login-list .login-input {
            outline: none;
            border-radius: 4px;
            border: 1px solid #ddd;
            font-size: 14px;
            color: #333;
            height: 38px;
            line-height: 38px;
            padding: 10px;
            width: 100%;
        }

        .global-login-list .login-submit {
            display: block;
            width: 100%;
            height: 42px;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
            border: none;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            background: #0072ff;
            background-image: -webkit-linear-gradient(120deg, #0072ff, #0332e0);
            background-image: linear-gradient(120deg, #0072ff, #0332e0);
            background-repeat: repeat-x;
        }

        .global-login-list .login-submit:hover,
        .global-login-list .login-submit:active {
            opacity: 0.9;
        }

        .global-login-cont .error-tips {
            font-size: 14px;
            color: #ff4a4a;
            margin-top: 12px;
        }

        .global-login-cont .form-tips a {
            color: #6f6f6f;
            cursor: pointer;
            text-decoration: none;
            font-size: 14px;
        }

        .global-login-cont .form-tips a:hover {
            color: #0072ff;
        }

        .global-login-cont .form-tips .form-tips-right {
            float: right;
        }

        .global-login-cont .form-tips .form-tips-left {
            float: left;
            font-size: 14px;
            color: #6f6f6f;
            cursor: pointer;
        }

        .global-login .ft-record {
            position: absolute;
            width: 100%;
            padding: 10px 0;
            bottom: 0;
            z-index: 2;
            text-align: center;
            color: #fff;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .global-login .ft-record a {
            color: #fff;
        }

        @media screen and (max-width:640px) {
            .login-logo {
                top: 15px;
                left: 15px;
                width: 180px;
                height: 54px;
                background-size: 180px;
            }

            .global-login-cont {
                width: 100%;
                padding: 20px;
                margin: 0 20px;
                margin-bottom: 20px;
            }

            .global-login-list .login-input,
            .global-login-list .login-submit {
                height: 42px;
                line-height: 42px;
            }
        }
    </style>
</head>

<body>
    <div class="global-login">

        <div class="login-logo"></div>
        <div class="global-bg"></div>

        <div class="global-login-cont">
            <h3 class="tit">系统登录</h3>
            <ul class="global-login-list">
                <li><input id="userName" value="admin" type="text" placeholder="请输入账号" class="login-input"></li>
                <li><input id="passWord" value="password" type="password" placeholder="请输入密码" class="login-input"></li>
                <li><input class="login-submit" id="submitButton" type="button" value="登录"></li>
            </ul>
            <div class="form-tips fn-clearfix">
                <!--<label class="form-tips-left" for="autolog"><input type="checkbox" checked  id="autolog">下次自动登录</label>-->
                <!--<a href="javascript:void(0);" class="form-tips-right" target="_blank">找回密码</a>-->
            </div>
            <!--<p class="error-tips">密码错误</p>-->
        </div>


        <div class="ft-record">Copyright@2020 深圳市智汇奇策科技有限公司 版权所有 <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备17140632号-1</a></div>


    </div>
    <script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>
    <script type="text/javascript" src="/js/jsencrypt.min.js"></script>
    <!--<script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>-->
    <script>
        $(document).ready(function() {
            var query = location.search;
            var type = ''
            try {
                type = query.split("type=")[1].split("&")[0]
            } catch (e) {

            }
            if (query === '?error') {
                layer.msg("用户名或密码错误", {
                    icon: 2
                });
            }
            if (type == 1) {
                console.log(666);
            }
            var curWwwPath = location.href;
            var pathName = location.pathname;
            var pos = curWwwPath.indexOf(pathName);
            var localhostPaht = curWwwPath.substring(0, pos);
            var gatewayUrl = "";
            var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
            console.log(localhostPaht + projectName);
            $("#userName").blur(function() {
                var userName = $("#userName").val();
                if (!userName || $.trim(userName) === '') {
                    layer.tips('请输入账号', '#userName', {
                        tips: [2, 'red'] //还可配置颜色
                    });
                }
            });
            $("#passWord").blur(function() {
                var password = $("#passWord").val();
                if (!password || password === '') {
                    layer.tips('请输入密码', '#passWord', {
                        tips: [2, 'red'] //还可配置颜色
                    });
                }
            });
            $("#passWord").keydown(function(e) {
                var theEvent = e || window.event;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    login();
                }
            })
            $("#submitButton").click(function() {
                login();
            });

            function login() {
                var userName = $("#userName").val();
                var password = $("#passWord").val();
                if (!userName || $.trim(userName) === '') {
                    layer.tips('请输入账号', '#userName', {
                        tips: [2, 'red'] //还可配置颜色
                    });
                    return;
                }
                if (!password || password === '') {
                    layer.tips('请输入密码', '#passWord', {
                        tips: [2, 'red'] //还可配置颜色
                    });
                    return;
                }
                var publicKey = getPublicKey(userName);
                if (publicKey === null) {
                    layer.msg('用户名或密码错误', {
                        icon: 2
                    });
                    return;
                }
                
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(publicKey);
                var encrypted = encrypt.encrypt(password);
                var loginParam = {
                    "userNo": userName,
                    "pwd": encrypted,
                    "platForm": "Web"
                };
                $.ajax({
                    url: gatewayUrl + "/oauth/before_login",
                    type: "POST",
                    data: JSON.stringify(loginParam),
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function(res) {
                        if (res.code === 200) {
                            var param = {
                                "username": userName,
                                "password": encrypted,
                                "platForm": "Web"
                            };
                            if (type == 1) {
                                AddressJump(projectName + "/login" + query, param);
                            } else {
                                post(projectName + "/login" + query, param);
                            }

                        } else {
                            layer.msg(res.msg, {
                                icon: 2
                            });
                        }
                    }
                });
            }

            function getPublicKey(userName) {
                var publicKey = null;
                if (userName) {
                    $.ajaxSettings.async = false;
                    $.get(gatewayUrl + "/oauth/publicKey/" + userName, function(res) {
                        if (res.code === 200) {
                            publicKey = res.obj;
                        } else {
                            console.log(res.msg)
                        }
                    })
                }
                return publicKey;
            }
            //post请求通用跳转页面
            function post(url, params) {
                // 创建form元素
                var temp_form = document.createElement("form");
                // 设置form属性
                temp_form.action = url;
                temp_form.target = "_self";
                temp_form.method = "post";
                temp_form.style.display = "none";
                // 处理需要传递的参数
                for (var x in params) {
                    var opt = document.createElement("textarea");
                    opt.name = x;
                    opt.value = params[x];
                    temp_form.appendChild(opt);
                }
                document.body.appendChild(temp_form);
                // 提交表单
                temp_form.submit();
            }
            //通用跳转页面
            function AddressJump(url, params) {
				url=url.split('redirect_uri=')[1].split("&")[0]
                window.location.href = url + "?" + parseParam(params)
            }
            // 对象转地址
            function parseParam(data) {
                var _result = [];
                for (var key in data) {
                    var value = data[key];
                    if (value.constructor == Array) {
                        value.forEach(function(_value) {
                            _result.push(key + '=' + value);
                        });
                    } else {
                        _result.push(key + '=' + value);
                    }
                }
                return _result.join('&');
            };
        });
    </script>
</body></html>
